<template>
  <div class="event-bus">
    <h1>vue插槽</h1>

    <A>
      <template v-slot:header>
        <h2>我是头部内容</h2>
      </template>
      <!-- <template #header>
        <h2>我是头部内容</h2>
      </template> -->

      <template #default>
        <h2 v-for="item in movie" :key="item">{{ item }}</h2>
      </template>

      <template #footer>
        <h2>我是头部内容</h2>
      </template>
    </A>

    <B>
      <template #default="slotProps">
        <h1>{{ slotProps.msg }}</h1>
      </template>

      <template #main="slotProps">
        <h2>{{ slotProps.title }}</h2>
      </template>
    </B>
  </div>
</template>
<script>
import A from './components/A.vue'
import B from './components/B.vue'
export default {
  components: { A, B },
  data() {
    return {
      movie: ['正在上映', '即将上映'],
    }
  },
}
</script>
